<template>
  <div class="common-card">
    <el-card shadow="always">
      <template #header>
        <div class="title color1">
          <icon-font icon-class="afl-gongzuohuizong"></icon-font>
          {{ title }}
        </div>
      </template>
      <div class="content-body">
        <el-row :gutter="5">
          <el-col :span="8">
            <div class="number-wrapper">
              <div class="number-desc">{{ $t('mes.filed1') }}</div>
              <div class="number">
                <count-to class="color2" :startVal='total.filed1.start' :endVal='total.filed1.end' prefix="" suffix=""
                          :duration='total.filed1.duration'></count-to>
                <div class="apng"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="number-wrapper">
              <div class="number-desc">{{ $t('mes.filed2') }}</div>
              <div class="number">
                <count-to class="color3" :startVal='total.filed2.start' :endVal='total.filed2.end' prefix="" suffix=""
                          :duration='total.filed2.duration'></count-to>
                <div class="apng"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="number-wrapper">
              <div class="number-desc" style="font-size: 17px"> {{ $t('mes.filed3') }} </div>
              <div class="number">
                <count-to class="color6" :startVal='total.filed3.start' :endVal='total.filed3.end'
                          prefix="" suffix=""
                          :duration='total.filed3.duration'></count-to>
                <div class="apng"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" style="">
            <div class="number-wrapper">
              <div class="number-desc">{{ $t('mes.filed4') }}</div>
              <div class="number">
                <count-to class="color4" :startVal='total.filed4.start' :endVal='total.filed4.end' prefix=""
                          suffix=""
                          :duration='total.filed4.duration'></count-to>
                <div class="apng"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" style="">
            <div class="number-wrapper">
              <div class="number-desc">{{ $t('mes.filed5') }}</div>
              <div class="number">
                <count-to class="color1" :decimals="2" :startVal='total.filed5.start' :endVal='total.filed5.end' prefix=""
                          suffix=""
                          :duration='total.filed5.duration'></count-to>
                <div class="apng"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="number-wrapper">
              <div class="number-desc">{{ $t('mes.filed6') }}</div>
              <div class="number">
                <count-to class="color5"  :startVal='total.filed6.start' :endVal='total.filed6.end'
                          prefix="" suffix=""
                          :duration='total.filed6.duration'></count-to>
                <div class="apng"></div>
              </div>
            </div>
          </el-col>

        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { CountTo } from 'vue3-count-to'
import iconFont from '@/components/IconFont/iconFont'
import { reactive, ref, watch } from 'vue'
import i18n from '@/hooks/language'

export default {
  name: 'lvtFeedingTotalCard',
  components: { iconFont, CountTo },
  props: {
    title: { type: String, default: 'LVT汇总数据' },
    totalData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup (props) {
    const { t } = i18n()
    const loadOptions = {
      start: 0,
      duration: 2000
    }
    // 上料总数(pcs) 订单个数 库存总数 上料种类 满拖总数
    const total = reactive({})
    // 添加监听watch
    const typeArr = ['filed1', 'filed2', 'filed3', 'filed4', 'filed5', 'filed6']
    typeArr.forEach(function (str, index) {
      total[str] = { ...loadOptions, ...{ end: props.totalData[str] || 0 } }
      if (str) {
        watch(() => props.totalData[str], () => {
          total[str].start = total[str].end
          total[str].end = props.totalData[str]
        })
      }
    })
    return { total }
  }
}
</script>

<style scoped lang="scss">
.common-card {
  .title {
    line-height: 36px;
    font-size: 16px;
    padding: 10px 0 0 20px;
    font-weight: bold;
    //border-bottom: 2px solid #76027D;
    width: 170px;
  }

  .font1 {
    background-image: -webkit-linear-gradient(bottom, rgb(201, 115, 255), rgb(20, 11, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 1px 1px 0 lightblue;
  }

  .content-body {
    height: 400px;

    .number-wrapper {
      background: url('/src/images/numberBg1.png') no-repeat;
      background-size: 100% 100%;
      padding: 0;
      text-align: center;

      .number-desc {
        color: rgb(153, 153, 153);;
        font-weight: 600;
        font-size: 16px;
        //padding-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 0 30px;
        height: 80px;
        box-sizing: border-box;
      }

      .number {
        padding-bottom: 20px;
        font-size: 25px;
        font-weight: bold;

        .apng {
          border-radius: 55px;
          height: 55px;
          width: 50%;
          margin-left: 25%;
          background: url('/src/images/numberBg.png') center center no-repeat;
          background-size: 100% 200%;
        }
      }
    }

  }
}
</style>
